<template>
  <div class="section-page">
    <h3 class="section-title">技术状态变化</h3>
    <el-button-group class="button-group mt10">
      <el-button
        type="default"
        :class="billType === 'NORMAL' ? 'btn-c-primary' : 'btn-c-default'"
        @click="billTypeChange('NORMAL')"
        >技术状态变更</el-button
      >
      <el-button
        type="default"
        :class="billType === 'TEMP' ? 'btn-c-primary' : 'btn-c-default'"
        @click="billTypeChange('TEMP')"
        >技术状态偏离</el-button
      >
    </el-button-group>
    <div class="mt10 tab-wrap">
      <div class="section-header mt10">
        <el-tabs v-model="activeTab" @tab-click="activeTabHandle">
          <el-tab-pane label="单机技术变更" name="DEVICE"></el-tab-pane>
          <el-tab-pane label="系统技术状态变更" name="SYSTEM"></el-tab-pane>
        </el-tabs>
        <el-form class="modify-form flex-center" inline>
          <el-form-item v-if="activeTab == deviceKey"  class="search-form-item">
            <div class="s-input" style="margin-top: 5px;">
              <input
                type="text"
                v-model="searchData.deviceCode"
                @keyup.enter="searchHandle"
                placeholder="单机代号"
              />
              <img
                src="@/assets/images/search.png"
                alt="搜索按钮"
                @click="searchHandle"
              />
            </div>
          </el-form-item>          
          <el-form-item v-else class="search-form-item">
            <div class="s-input" style="margin-top: 5px;">
              <input
                type="text"
                v-model="searchData.sysCode"
                @keyup.enter="searchHandle"
                placeholder="系统代号"
              />
              <img
                src="@/assets/images/search.png"
                alt="搜索按钮"
                @click="searchHandle"
              />
            </div>
          </el-form-item>
          <el-form-item class="search-form-item">
            <el-button
              class="btn-add-primary"
              icon="el-icon-plus"
              style="margin-top: -2px;"
              @click="addHandle"
            ></el-button>
          </el-form-item>
          <el-form-item class="search-form-item">
            <import-data :api-url="importUrl" title="导入数据" :params="importParams" @upload-success="uploadSuccess"/>
          </el-form-item>
          <el-form-item class="search-form-item">
            <a class="btn-40 btn-img hover" title="模板下载" :href="templateUrl" download="技术状态_模板.xlsx">
              <span class="icon-img download"></span>
            </a>
          </el-form-item>
        </el-form>
      </div>
      <technology-table :loading="loading" class="mt10" :device-or-system="activeTab" :bill-type="billType" :list="tableData" @refresh="refresh"></technology-table>
      <div style="padding: 10px;text-align: center;">
        <el-pagination
          background
          layout="total, sizes, prev, pager, next, jumper"
          :page-size="pageOption.pageSize"
          :total="pageOption.total"
          :page-sizes="pageOption.sizes"
          @size-change="sizeCurrentChange"
          @current-change="pageCurrentChange"
        >
        </el-pagination>
      </div>
    </div>

    <add-dialog
      v-if="showAdd"
      :model-id="this.id"
      :type="activeTab"
      :bill-type="billType"
      @close="closeHandle"
    />
  </div>
</template>

<script>
import technologyApi from '@/apis/overview/technology.js'
import AddDialog from './AddDialog.vue'
import TechnologyTable from './TechnologyTable'
import ImportData from '@/components/ImportData.vue'
import templateUrl from '@/template/技术状态_模板.xlsx'


export default {
  components: { AddDialog, TechnologyTable, ImportData},
  props: ['id'],
  data() {
    return {
      searchData: {
        deviceCode: '',
        sysCode: ''
      },
      pageOption: {
        page: 1,
        pageSize: 10,
        total: 0,
        sizes: [5, 10, 20, 30, 40, 50, 100]
      },
      deviceKey: 'DEVICE',
      activeTab: 'DEVICE',
      billType: 'NORMAL', // NORMAL: 技术状态变更, TEMP: 临时技术状态变更
      loading: false,
      tableData: [],
      showAdd: false,
      templateUrl,
      importUrl: technologyApi.technologyImportUrl
    }
  },
  computed: {
    importParams() {
      return {modelId: this.id}
    }
  },
  methods: {
    billTypeChange(type) {
      this.billType = type
      this.pageOption.page = 1
      this.tableData = []
      this.requestListData()
    },
    activeTabHandle() {
      this.searchData.deviceCode = ''
      this.searchData.sysCode = ''
      this.tableData = []
      this.pageOption.page = 1
      this.requestListData()
    },
    refresh() {
      this.requestListData()
      this.$emit('refresh-sub')
    },
    searchHandle() {
      this.pageOption.page = 1
      this.requestListData()
    },
    addHandle() {
      this.showAdd = true
    },
    closeHandle(refresh) {
      if (refresh) {
        this.refresh()
      }
      this.showAdd = false
    },
    sizeCurrentChange(size) {
      this.pageOption.pageSize = size
      this.requestListData()
    },
    pageCurrentChange(page) {
      this.pageOption.page = page
      this.requestListData()
    },
    requestListData() {
      const {page, pageSize} = this.pageOption
      this.loading = true
      technologyApi
        .technologyList({
          modelId: this.id,
          type: this.activeTab,
          billType: this.billType,
          ...this.searchData,
          pageNum: page,
          pageSize
        })
        .then(({ data }) => {
          const {list, total} = data;
          this.tableData = list.map((item) => {
            item.edit = false
            return item
          })

          this.pageOption.total = total
          this.loading = false
        }).catch(() => {
          this.loading = false
        })
    },
    uploadSuccess() {
      this.searchData.deviceCode = ''
      this.pageCurrentChange(1)
    }
  },
  mounted() {
    this.requestListData()
  },
}
</script>

<style lang="scss" scoped></style>
